<template>
  <van-nav-bar title="标题" left-text="返回" left-arrow>
    <template #right>
      <van-icon name="search" size="18" />
    </template>
  </van-nav-bar>

  <div class="nav content">
    <!-- <div class="nav-job">
            <router-link to="/liebieView"><div><van-icon name="arrow-left" /></div></router-link>
            <div><van-search placeholder="搜索商品名称" /></div>
            <div><van-icon name="chat-o" /></div>
        </div> -->
    <div class="nav-item">
      <div>综合</div>
      <div>价格</div>
      <div>分类</div>
      <div><van-icon name="list-switch" /></div>
    </div>
    <div class="shangpin">
      <img src="../../assets/images/25.png" alt="" />
      <div class="shangpin-item">
        <router-link to="/shangpinView"
          ><div>直发 ecostore/ecostore 椰子香草沐浴露400m</div></router-link
        >
        <div class="b">￥<span>108</span></div>
        <div class="c">
          <div>152条评价</div>
          <div>月销售100笔</div>
        </div>
      </div>
    </div>
    <div class="shangpin">
      <img src="../../assets/images/25.png" alt="" />
      <div class="shangpin-item">
        <div>直发 ecostore/ecostore 椰子香草沐浴露400m</div>
        <div class="b">￥<span>108</span></div>
        <div class="c">
          <div>152条评价</div>
          <div>月销售100笔</div>
        </div>
      </div>
    </div>
    <div class="shangpin">
      <img src="../../assets/images/25.png" alt="" />
      <div class="shangpin-item">
        <div>直发 ecostore/ecostore 椰子香草沐浴露400m</div>
        <div class="b">￥<span>108</span></div>
        <div class="c">
          <div>152条评价</div>
          <div>月销售100笔</div>
        </div>
      </div>
    </div>
    <div class="shangpin">
      <img src="../../assets/images/25.png" alt="" />
      <div class="shangpin-item">
        <div>直发 ecostore/ecostore 椰子香草沐浴露400m</div>
        <div class="b">￥<span>108</span></div>
        <div class="c">
          <div>152条评价</div>
          <div>月销售100笔</div>
        </div>
      </div>
    </div>
    <div class="shangpin">
      <img src="../../assets/images/25.png" alt="" />
      <div class="shangpin-item">
        <div>直发 ecostore/ecostore 椰子香草沐浴露400m</div>
        <div class="b">￥<span>108</span></div>
        <div class="c">
          <div>152条评价</div>
          <div>月销售100笔</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.content {
  width: 375px;
  margin: 0 auto;
}
.nav-job {
  display: flex;
  margin-top: 10px;
  border-bottom: 1px solid #ccc;
}
.nav-job div {
  height: 40px;
  line-height: 40px;
  margin-left: 10px;
}
.nav-job div:nth-child(3) {
  font-size: 20px;
}
.nav-item {
  display: flex;
  justify-content: space-between;
  padding: 15px;
}
.shangpin {
  display: flex;
  padding: 5px;
}
.shangpin-item {
  margin-top: 10px;
}
.shangpin-item div {
  padding: 5px 0;
}
.b {
  color: #f00;
}
.b span {
  color: #f00;
  font-size: 18px;
}
.c {
  display: flex;
  color: #ccc;
}
.c div:nth-child(2) {
  margin-left: 10px;
}
</style>
